<template>
	<view class="user">
		<!-- 上方显示用户信息的区域 -->
		<view class="userinfo">
			<!-- 信息区域 -->
			<view class="top">
				<view class="avator">
					<uni-icons type="person-filled" size="50" color="#7c7c7c"></uni-icons>
				</view>

				<view class="uname">
					<view>用户名：{{userInfo.username}}</view>
					<view>手机号：{{userInfo.phone}}</view>
				</view>
			</view>
		</view>
		<!-- 下方显示的四项用户操作项 -->
		<view class="list">
			<uni-list>
				<uni-list-item v-for="item,index in manageList" :title="item.name" :show-extra-icon="true"
					:extra-icon="item.icon" clickable link @tap="navto(index)">
				</uni-list-item>
			</uni-list>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue"
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app"
	import $req from "../login_register/request"

	const userInfo = ref({})
	const userInfos = async () => {
		userInfo.value = uni.getStorageSync("user")
	}
	const navto = async(index)=>{
		switch(index) {
			case 0:
			case 1:
			case 2:
			case 3:
			return
			break
			case 4:
			await exit()
			break
		}
	}

	async function exit(){
		uni.setStorageSync("user",void[0])
		uni.setStorageSync("token",void[0])
		uni.redirectTo({
			url:'/pages/login_register/login_register'
		})
	}

	const manageList = ref([{
		name: '订单管理',
		icon: {
			color: '#56c48b',
			size: '22',
			type: 'shop'
		}
	}, {
		name: '地址管理',
		icon: {
			color: '#ff6700',
			size: '22',
			type: 'location-filled'
		}
	}, {
		name: '我的收藏',
		icon: {
			color: '#0225ff',
			size: '22',
			type: 'star'
		}
	}, {
		name: '设置',
		icon: {
			color: '#0081b9',
			size: '22',
			type: 'gear'
		}
	}, {
		name: '退出登录',
		icon: {
			color: '#F00000',
			size: '22',
			type: 'minus'
		}
	}])

	onShow(async () => {
		await userInfos()
	})
</script>

<style>
	/* 重置一些默认样式 */
	body,
	view {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}

	.user {
		/* 设置一个浅灰色背景 */
		background-color: #4a84aa;
		margin: 0;
		padding: 0;
		/* 内边距，可根据实际需求调整 */
	}

	.userinfo {
		display: flex;
		background-color: #70acf4;

		height: 300rpx;
		justify-content: flex-start;
		align-items: flex-end;
	}

	.top {
		margin: 20px;
		display: flex;
		align-items: center;
		/* 垂直方向上元素居中对齐 */
		gap: 10px;
		/* 元素之间的间距 */

	}

	.avator {
		border-radius: 50%;
		/* 设置为圆形 */
		border: 2px solid #ccc;
		/* 灰色边框 */
		padding: 2px;
		/* 内边距，可让头像图标不会紧贴边框 */
	}

	.uname {
		font-size: 22px;
		color: #333;
		/* 字体颜色，可根据喜好调整 */
	}

	.uname[v-else] {
		color: #007aff;
		/* 未登录时提示文字的颜色，蓝色示例 */
		cursor: pointer;
		/* 鼠标悬停变为手型指针 */
		text-decoration: underline;
		/* 添加下划线，更醒目 */
	}
	
	.uni-list{
		width: 100%;
	}
</style>